=====================================
Error Reporting Guide for Developers
=====================================

Overview
--------
This document outlines the standard process for reporting errors encountered in the d3VIEW application. Proper error reporting helps developers quickly identify, reproduce, 
and fix issues.


Console Errors (console.log / console errors)
--------------------------------------------

Steps to Capture:

1. Open the application in your browser.
2. Right-click anywhere on the page and select **Inspect**.

.. thumbnail:: /_images/Images/inspectelement.png
   :title:

   Inspect

.. centered:: :sup:`Inspect`

|

3. Navigate to the **Console** tab.

.. thumbnail:: /_images/Images/inspectconsolelog.png
   :title:

   Console log

.. centered:: :sup:`Console log`

|

4. Reproduce the issue.
5. Look for:

   - Errors (red messages)
   - Warnings (yellow messages)
   - Relevant logs (console.log outputs)

What to Capture:

- Screenshot of the console
- Exact error message
- Stack trace (if available)

Example:

.. code-block:: js

   TypeError: Cannot read property 'data' of undefined
       at fetchData (app.js:45)

	   
.. thumbnail:: /_images/Images/inspectconsolelogerror.png
   :title:

   Console log Error

.. centered:: :sup:`Console log Error`

|	   


Network Payload
---------------

Steps to Capture:

1. Open Developer Tools.
2. Go to the **Network** tab.

.. thumbnail:: /_images/Images/networktab.png
   :title:

   Network

.. centered:: :sup:`Network`

|

3. Refresh the page or trigger the action causing the issue.
4. Filter requests using:

   - XHR / Fetch

5. Select the relevant request.
6. Go to the **Payload** tab.

What to Capture:

- Request URL
- Request method (GET, POST, etc.)
- Request payload/body
- Headers (if relevant)

Example:

.. code-block:: json

   {
     "name": "John",
     "email": "john@example.com"
   }

Example : 
   
.. thumbnail:: /_images/Images/payloadscreenshot.png
   :title:

   Payload

.. centered:: :sup:`Payload`

|   

.. thumbnail:: /_images/Images/headercreenshot.png
   :title:

   Header

.. centered:: :sup:`Header`

|   



Network Response
----------------

Steps to Capture:

1. In the same Network request,
2. Navigate to the **Response** tab.

What to Capture:

- Response status code (e.g., 200, 400, 500)
- Response body
- Error message from backend (if any)

Example:

.. code-block:: json

   {
     "error": "Database connection failed"
   }

Example:

.. thumbnail:: /_images/Images/netwrokresponseerror.png
   :title:

   Network Response

.. centered:: :sup:`Network Response`

|   


Additional Details to Include
-----------------------------

When reporting an issue, always include:

- Steps to reproduce
- Expected behavior
- Actual behavior
- Screenshots or screen recordings
- Browser and version



Conclusion
----------

Following this structured approach ensures that developers receive all the necessary information to diagnose and resolve issues efficiently.


Please review the Demo Video below to report an issue
------------------------------------------------------------

.. video:: _static/movies/tutorialvideoerrorreporting.mp4
   :width: 100% 
   
   
|